<template>
  <div
    v-loading="loading"
    class="login"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="left">
      <div class="header">
        <img src="../../assets/login_logo.png" alt="" />
        <span class="el-header">黑马面面</span>
        <span class="el-header-two"></span>
        <span class="el-header-three">用户登陆</span>
      </div>

      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item prop="phone">
          <el-input
            v-model="form.phone"
            prefix-icon="el-icon-user"
            placeholder="请输入手机号"
          />
        </el-form-item>
        <!--密码验证--->
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            prefix-icon="el-icon-lock"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        <!--验证码-->
        <el-form-item prop="code">
          <div class="el-code">
            <el-input v-model="form.code" placeholder="请输入验证码" />
            <img :src="img" alt="" @click="changeimg" style="width: 131px" />
          </div>
        </el-form-item>

        <!--记住密码-->
        <el-form-item prop="remember">
          <div class="remember">
            <el-checkbox v-model="remember">记住密码</el-checkbox>
          </div>
        </el-form-item>

        <!--用户协议-->
        <el-form-item prop="checked">
          <el-checkbox v-model="form.checked" style="font-size: 24px">
            我已阅读并同意
            <a href="#"
              ><span class="el-link--inner1" style="color: #40a9fc"
                >用户协议</span
              ></a
            >
            和
            <a href="#"
              ><span class="el-link--inner2" style="color: #40a9fc"
                >隐私条款</span
              ></a
            >
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn" @click="submit(form)"
            >登陆</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn" @click="register"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <img src="../../assets/login_banner_ele.png" alt="" class="pic" />
    <!--新增注册组件-->
    <Dia ref="MyRegister" @gologin="gologin($event)" />
  </div>
</template>
<script>
import Dia from './component/add.vue'
export default {
  components: {
    Dia
  },
  data () {
    return {
      loading: false,

      img: `http://localhost/heimamm/public/captcha?type=login&a=${Date.now()}`,
      remember: JSON.parse(localStorage.getItem('isChecked')) || false,
      form: {
        phone: localStorage.getItem('phone') || '',
        password: localStorage.getItem('password') || '',
        code: '',
        checked: JSON.parse(localStorage.getItem('check')) || false
      },
      rules: {
        phone: [
          { required: true, message: '必填', trigger: 'change' },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请正确输入手机号',
            trigger: 'change'
          }
        ],
        // 密码要求6-12位
        password: [
          { required: true, message: '必填', trigger: 'change' },
          {
            min: 6,
            max: 12,
            message: '请输入6-12位密码',
            trigger: 'change'
          }
        ],
        code: [{ required: true, message: '必填', trigger: 'change' }],
        checked: [
          {
            required: true,
            pattern: /^true$/,
            message: '请勾选协议',
            trigger: 'change'
          }
        ]
      }
    }
  },

  methods: {
    gologin (v) {
      this.form.phone = v.phone
      this.form.password = v.psw
    },
    changeimg () {
      this.img = `http://localhost/heimamm/public/captcha?type=login&a=${Date.now()}`
    },
    submit () {
      this.$refs.form.validate(async result => {
        if (result) {
          this.loading = true
          localStorage.setItem('check', true)
          localStorage.setItem('phone', this.form.phone)
          // localStorage.removeItem('phone')
          if (this.remember) {
            // localStorage.setItem("phone", this.form.phone);
            localStorage.setItem('password', this.form.password)
            localStorage.setItem('isChecked', true)
          } else {
            localStorage.removeItem('isChecked')
            localStorage.removeItem('password')
          }
          try {
            await this.$store.dispatch('login/toLogin', this.form)
            this.$message.success('登录成功')
            // 跳转到首页
            this.$router.push('/')
          } finally {
            this.loading = false
            this.img = `http://localhost/heimamm/public/captcha?type=login&a=${Date.now()} `
          }
        }
      })
    },

    register () {
      //打开注册窗口
      this.$refs.MyRegister.show = true
    }
  }
}
</script>
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
}
</style>
<style lang="less" scoped>
.login {
  position: relative;
  display: flex;
  height: 100vh;
  background: linear-gradient(#1493fa 28%, #01c6fa 96%);
  align-items: center;
  justify-content: space-around;
  .pic {
    position: absolute;
    bottom: 30%;
    right: 10%;
    z-index: 1;
  }
  .el-code {
    line-height: 40px;
    display: flex;
    .img {
      display: flex;
    }
  }
  .left {
    width: 478px;
    height: 550px;
    background: #f5f5f5;
    padding: 44px 42px;
    position: absolute;
    top: 25%;
    left: 10%;
    z-index: 998;
    .el-header-two {
      color: #c7c7c7;
    }
    a {
      text-decoration: none;
    }
    .el-link--inner1 {
      margin-left: -4px;
      margin-right: -4px;
    }
    .el-link--inner2 {
      margin-left: -4px;
    }
    a:hover {
      text-decoration: underline;
      cursor: pointer;
    }
    .el-code .p {
      display: flex;
    }
    .btn {
      width: 100%;
      margin-top: 10px;
    }
    ::v-deep .el-input__inner {
      width: 100%;
    }
    .remember {
      margin-top: -10px;
      margin-bottom: -40px;
    }
  }
  .header {
    display: flex;
    margin-bottom: 35px;
    align-items: center;
    img {
      width: 25px;
      height: 18px;
    }
    .el-header-two {
      width: 1px;
      height: 28px;
      background: #c7c7c7;
      margin-right: 10px;
      display: block;
    }
    .el-header-three {
      font-size: 22px;
      font-family: PingFangSC Regular, PingFangSC Regular-Regular;
      font-weight: 400;
      text-align: left;
      color: #0c0c0c;
      margin-left: 5px;
    }
    .el-header {
      font-size: 24px;
      color: #0c0c0c;
    }
  }
}
</style>
